<template>
    <div class="main">
     <div class="pageLeft">
       <div class="sunBoxTitel">
        <img  class="logo" src="../../static/image/logo.png"/>
        <span class="sunBox">阳光盒子</span>
       </div>
       <div class="pageHead">
         <div class="icon"></div>
         <p class="recommendLesson">推荐课程</p>
       </div>
       <div class="putLesson">
         <button style="position:relative;width: 15%;height: 20%;top: 80%;float: left"></button>
         <div style="text-align:center;position:relative;width: 85%;height: 20%;display: block;left: 15%;top: 80%;background: rgba(0,0,0,0.3);">
           <a class="lessonTitle">别和陌生人说话</a>
         </div>
       </div>
       <div class="screenLesson">
         <p class="screenIcon"></p>
         <p class="screenTxt">筛选</p>
       </div>
       <div class="pageBody" >
         <!--<p style="margin: 0" class="classList">按班级</p>-->
         <!--<ul  class="classTypeList" style="margin-left: -60px;color: #a6a9ad ">-->
           <!--<li v-for="cla in classList" style="margin-left: 8%;float: left;">{{cla}}</li>-->
         <!--</ul>-->
         <!--<br/>-->
         <!--<br/>-->
         <!--<p style="margin: 0" class="lessonsList">按学科</p>-->
         <!--<ul  class="classTypeList" style="margin-left: -58px;color: #a6a9ad">-->
           <!--<li v-for="le in lessonsList" style="margin-left: 7%;margin-top:10px;float: left;">{{le}}</li>-->
         <!--</ul>-->
         <!--<ul class="classTypeList" v-for="(item,index) in labelList" :class="{red:changeRed.indexOf(index)!==-1}" @click="check(index,item)">-->
         <!--<li class="classType">{{item}}</li>-->
         <!--</ul>-->
       </div>
       <button class="favorite">
         <img src="ww"/>
         我的收藏夹
       </button>
     </div>
      <div class="pageRight">
        <div class="headLiset">
          <img class="menu" src="@/assets/menu.png" />
          <span class="lessonList" >课程列表</span>
          <img src="ww" class="xiaomishu"/>
          <span class="xiaomishutext">小秘书</span>
          <img src="ww" class="timeBook"/>
          <span class="timeBookText">时光书屋</span>
          <img src="ww" class="backImg"/>
          <span class="backText">退出</span>
        </div>

        <div class="colorBar">
          <div v-for="color in colorList" class="colorStrip" v-bind:style="{backgroundColor:color}"></div>
        </div>
        <div class="pageTwo" id="page" v-bind:style="{height:pageHeight+'px'}">
          <div style="height: 100%;overflow: auto">
            <div style="width:100%;height: 80%;">
              <el-col :span="4" v-for="(item, index) in (chooseLessonList.length==0&&tagList.length==0?lessons:chooseLessonList)" :key="index" class="lessons">
                <div class="list">
                  <img @click="details(item.id +(item.verstion || ''),item.subject,item.name)" src="@/assets/group_6.png" class="listImg"/>
                  <!--<img v-if="item.isChecked == 1? true :false" class="status" src="../../static/image/group_14.svg"/>-->
                  <!--<img class="heart" v-if="item.like?true:false" src="../../static/image/inversesolid.svg"/>-->
                  <div style="padding: 14px;">
                    <span class="lessonsName" @click="details(item.id +(item.verstion || ''),item.subject,item.name)">{{item.name}}</span>
                  </div>
                </div>
              </el-col>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import Analytics from "@/js/analytics.js"
  import Data from "@/js/server.js"
    export default {
        name: "newPage",
      data(){
        return{
          pageHeight:0,
          lessonsList:['文本阅读','绘本阅读','科学','音乐','游戏'],
          classList:['小班','中班','中班','混龄班'],
          colorList:['#881894','#2D8DEE','#00DE2E','#FFBF00','#F38100','#F74E1B','#CF2118','#34465F','#AB32B8','#499DF2','#00DE2E','#FFBF00','#F38100','#F74E1B','#CF2118'],
          tagList:[],
          chooseLessonList:[],
          changeRed:[],
          labelList:[],
          lessons:[],
          Headlines:'我的收藏',
          reset:false
        }
      },
      mounted:function(){
        this.getLable();
        this.getLesson();
        // this.jisuan()

        this.getWindowHeight();
      },
      methods:{
          // jisuan:function(){
          //   var a=
          // },
        getWindowHeight:function(){
          var H=document.documentElement.clientHeight-130
          this.pageHeight=H;
        },
        burPoint: function (subject,lessonName){
          var self = this
          var userId = AV.User.current().toJSON().objectId
          Analytics.openLesson(lessonName,userId)
        },
        details:function (id,subject,name) {
          this.$router.push({
            path:'/lessonInfo/'+id       //lesson
          })
          this.burPoint(subject,id)
        },
          getLable:function(){
            var self=this;
            var labelStart=new AV.Query('Label');
            labelStart.equalTo('type',0);
            var labelEnd=new AV.Query('Label');
            labelEnd.equalTo('type',1);
            var label = AV.Query.or(labelStart, labelEnd);
            label.find().then(function (data) {
              // console.log(data)
              data.forEach(function (item) {
                self.labelList.push(item.attributes.name)
              })
            });
          },
        check:function (index,name) {
          -1===this.changeRed.indexOf(index) ? this.addValue(index,name) :this.removeByValue(this.changeRed,index,name,this.tagList);
        },
        //删除数组中的制定的元素
        removeByValue:function(arr, val,name,tagList) {
          var self=this;
          for(var i=0; i<arr.length; i++) {
            if(arr[i] == val) {
            arr.splice(i, 1);
            break;
            }
          }
          for(var j=0;j<tagList.length;j++){
            if(tagList[j] == name) {
              tagList.splice(j, 1);
              break;
            }
          }
          var lessonList=[];
          var chooseLessons=[];
          this.tagList.forEach(function(tag){
            // console.log(tag)
            self.lessons.forEach(function(lesson){
              lesson.tags.forEach(function(value){
                if(value.indexOf(tag)>=0){
                  lesson.push(lesson)
                }
              })
            })
            if(self.tag.length>1){
              chooseLessons=self.unique(lessonList)
            }
            else{
              chooseLessons= lessonList
            }
          })
          self.chooseLessonList=chooseLessons;
        },
        addValue:function (index,name) {
          var lessonList=[];
          var self=this;
          var chooseLessons=[]
          this.changeRed.push(index);
          this.tagList.push(name);
          this.tagList.forEach(function(tag){
            // console.log(tag)
            self.lessons.forEach(function(lesson){
              lesson.tags.forEach(function(value){
                if(value.indexOf(tag)>=0){
                  lessonList.push(lesson)
                }
              })
            })
            if(self.tagList.length>1){
              chooseLessons=self.unique(lessonList)
            }
            else{
              chooseLessons= lessonList
            }
          })
          self.chooseLessonList=chooseLessons
        },
        unique:function (arr){
          var self=this;
          var tmp = [];
          arr.forEach(function (item) {
            let count=0
            for(var i=0;i<arr.length;i++){
              if(item==arr[i]){
                count++;
              }
            }
            (arr.indexOf(item) !== arr.lastIndexOf(item) && tmp.indexOf(item) === -1 && count===self.tagList.length) && tmp.push(item)
          })
          console.log(tmp)
          return tmp;
        },
        getLesson:function () {
            var self=this
          Data.getAllLessons(function (lessonList) {
            Data.checkoutLike(function(likeLessonList){
              self.lessons = self.handelLessonLikeStatus(lessonList,likeLessonList)
            })
          })
        },
        handelLessonLikeStatus:function(lessonList,likeLessonList){
          lessonList.forEach(function (lesson) {
            lesson.like = false
            likeLessonList.forEach(function (likeLesson) {
              if(lesson.id === likeLesson){
                lesson.like = true
              }
            })
          })
          return lessonList
        },

      }
    }
</script>

<style scoped>
  .pageLeft{
    width:271px;
    height: 100%;
    background-color: #ffffff;
    float: left

  }
  .pageRight{
    position: absolute;
    top:0px;
    width:1329px;
    height: 100%;
    left: 271px;
    overflow: hidden;
    background-color: #E9EDF3;
  }
  .colorBar{
    left: 8px;
    position: relative;
    width: 1329px;
    height: 4px;
  }
  .colorStrip{
    position: relative;
    float: left;
    border-bottom: 1px solid #6f7180;
    width: 88px;
    height: 4px;
    /*background-color: yellow;*/
  }
  .headLiset{
    position: relative;
    top:0;
    width: 1329px;
    height: 70px;
    background-color: white;
  }
  .icon{
    position: absolute;
    top: 105px;
    left:6px;
    width:4px;
    height: 20px;
    display: block;
    background-color: #FE9907;
  }
  .sunBox{
    position: relative;
    min-width: 120px;
    height: 42px;
    top: 14.5px;
    left:70px;
    font-size: 25px;
    color: #FE9907;
  }
  .logo{
    position: relative;
    top: 18px;
    left: 65px;
    width:39px;
    height: 34px;

  }
  .recommendLesson{
    position: absolute;
    top: 84px;
    font-size: 18px;
    min-width:103px;
    /*height: 66px;*/
    left: 24px;
  }
  .sunBoxTitel{
    min-width: 150px;
    width:271px;
    height: 70px;
    border-bottom: 5px solid #EAEBEE;
  }
  .main{
   position: absolute;
    margin: 0;

    /*overflow-x: hidden;*/
    height: 100%;
    background-color: #E4E7EC;

  }
  .pageHead{
    height: 65px;
  }
  .putLesson{
    background-image: url("../assets/smile.png");
    background-size: 100% 100%;
    margin-left: 6px;
    width:256px;
    height: 193px;
  }
  .screenLesson{

  }
  .screenIcon{
    position: absolute;
    top: 332px;
    left:14px;
    width:3px;
    height: 20px;
    display: block;
    background-color: #FE9907;
  }
  .screenTxt{
    position: relative;
    font-size: 18px;
    top: 10px;
    width: 66px;
    height: 66px;
    left: 28px;
  }
  .pageBody{
    margin-top: -10%;
    margin-left: 29px;
    /*overflow-y: scroll;*/
    font-size: 20px;
    height: 30%;
    width:87.1%;
  }
  .favorite{
    margin: 0;
    padding: 0;
    border: 1px;
    position: relative;
    top: 72%;
    left: 16px;
    font-size: 16px;
    width: 238px;
    height: 4.7%;
    background-color: #a6c738;
    color: white;
  }
  .pageTwo{
    position: relative;
    text-align: center;
    overflow: hidden;
    padding:  30px 0;
    top:3px;
    left: 14px;
    margin-top: 10px;
    min-width: 800px;
    overflow-x: auto;
    width:1304px;

    border-radius:12px;
    background-color: #ffffff;
  }
  .classType{
    cursor: pointer;
    margin: 0;
  }
  .classTypeList{
    margin-left: -36px;
    font-size: 13px;
    list-style: none;

  }
  .red{
    color: green;
  }
  .lessonList{
    position: absolute;
    left: 62px;
    top: 26px;
    font-size: 14px;
    color:#333333;
  }
  .xiaomishu{
    position:absolute;
    left:1019px;
    top:30px
  }
  .xiaomishutext{
    position: absolute;
    left:1043px;
    top: 26px;
    min-width: 36px;
    font-size:14px;
    color:#666666;
  }
  .timeBook{
    position:absolute;
    left:1116px;
    top:30px
  }
  .timeBookText{
    position: absolute;
    left: 1142px;
    top: 26px;
    min-width: 48px;
    font-size: 14px;
    color:#666666;
  }
  .backImg{
    position:relative;
    left:1229px;
    top:16px
  }
  .backText{
    position: relative;
    left: 1254px;
    top: 16px;
    min-width:24px;
    font-size: 14px;
    color:#666666;
  }
  .menu{
    position:absolute;
    left: 35px;
    top:18px;
    width:28px;
    height: 35px;
  }
  .list{

  }
  .listImg{
    /*margin-left: ;*/
    height:143px;
    width: 184px;
  }
  .lessons{
    margin-top:17.5px;
  }
  .classList{
    color:#333333;
    font-size: 16px;
  }
  .lessonsList{
    color:#333333;
    font-size: 16px;
  }
  .classTypeList{
    font-size:14px;
    color:#838383;
  }
  .lessonsName{
    font-size: 15px;
    color:#333333;
  }
  .lessonTitle{
    color: #ffffff;
    font-size: 14px;
    margin-left: -120px
  }
  /*.pageRight::-webkit-scrollbar {display:none}*/
</style>
